<template>
	<view>
		<view class="container">
			<!-- 左侧导航栏 -->
			<view class="fixed top-0 left-0 bg-gray h-full width-256 p-16 text-whilte box-fixed">
				<!-- 双碳管理系统 -->
				<view class="font-bold text-xl mb-32">
					<text>双碳管理系统</text>
				</view>
				<view>
					<!-- 我的任务 -->
					<view class="text-sm text-gray  mb-8">
						<text>我的任务</text>
					</view>
					<!-- 出库申请审核 -->
					<view class="bg-blue round-lg px-16 py-8">
						<text>出库申请审核</text>
					</view>
				</view>
			</view>
			<!-- 主体数据展示区 -->
			<view class="ml-256 h-full p-32">
				<!-- 搜索区域 -->
				<view class="bg-white p-24 round-sm shadow mb-24">
					<!-- 第1行 -->
					<view class="grid grid-cols-6 gap-24 mb-16">
						<!-- 6列 -->
						<view>
							<!-- 单据号 -->
							<label class="text-sm font-bold mb-8">单据号</label>
							<input type="text" placeholder="请输入单据号" class="text-sm px-16 py-8 border round-lg" />
						</view>
						<view>
							<!-- 业务类型 -->
							<label class="text-sm font-bold mb-8">业务类型</label>
							<uni-data-select></uni-data-select>
						</view>
						<view>
							<!-- 客户 -->
							<label class="text-sm font-bold mb-8">客户</label>
							<uni-data-select></uni-data-select>
						</view>
						<view>
							<!-- 合同类型 -->
							<label class="text-sm font-bold mb-8">合同类型</label>
							<uni-data-select></uni-data-select>
						</view>
						<view>
							<!-- 申请人 -->
							<label class="text-sm font-bold mb-8">申请人</label>
							<uni-data-select></uni-data-select>
						</view>
						<view>
							<!-- 申请日期 -->
							<label class="text-sm font-bold mb-8">申请日期</label>
							<uni-datetime-picker type="datetimerange" rangeSeparator="至" border="true" />
						</view>
					</view>
					<!-- 第2行 -->
					<view class="grid grid-cols-6 gap-24 mb-16">
						<view>
							<!-- 申请状态 -->
							<label class="text-sm font-bold mb-8">申请状态</label>
							<uni-data-select></uni-data-select>
						</view>
						<view>
							<!-- 审核人 -->
							<label class="text-sm font-bold mb-8">审核人</label>
							<uni-data-select></uni-data-select>
						</view>
						<view>
							<!-- 审核日期 -->
							<label class="text-sm font-bold mb-8">审核日期</label>
							<uni-datetime-picker type="datetimerange" rangeSeparator="至" border="true" />
						</view>
						<view>
							<!-- 审核状态 -->
							<label class="text-sm font-bold mb-8">审核状态</label>
							<uni-data-select></uni-data-select>
						</view>
						<view>
							<!-- 单据状态 -->
							<label class="text-sm font-bold mb-8">单据状态</label>
							<uni-data-select></uni-data-select>
						</view>
					</view>
					<!-- 第3行 -->
					<view class="flex justify-end gap-10">
						<button style="margin-left:0px;margin-right:0px" class="text-sm px-16 py-8 border">重置</button>
						<button style="margin-left:0px;margin-right:0px"
							class="text-sm px-16 py-8 border bg-blue text-whilte">搜索</button>
					</view>
				</view>
				<!-- 数据列表 -->
				<view class="bg-white p-24 round-sm shadow">
					<!-- 表格 -->
					<uni-table>
						<!-- 表头行 -->
						<uni-tr>
							<uni-th align="left" width="52">编号</uni-th>
							<uni-th align="left" width="52">单据号</uni-th>
							<uni-th align="left" width="52">关联单据号</uni-th>
							<uni-th align="left" width="52">业务类型</uni-th>
							<uni-th align="left" width="52">客户</uni-th>
							<uni-th align="left" width="52">合同编号</uni-th>
							<uni-th align="left" width="52">合同类型</uni-th>
							<uni-th align="left" width="52">申请人</uni-th>
							<uni-th align="left" width="52">申请日期</uni-th>
							<uni-th align="left" width="52">申请状态</uni-th>
							<uni-th align="left" width="52">审核人</uni-th>
							<uni-th align="left" width="52">审核日期</uni-th>
							<uni-th align="left" width="52">审核状态</uni-th>
							<uni-th align="left" width="52">操作</uni-th>
						</uni-tr>
						<!-- 表格数据行 -->
						<uni-tr v-for="(item,index) in dataLIist" :key="index">
							<uni-td>{{item.id}}</uni-td>
							<uni-td>{{item.docu_no}}</uni-td>
							<uni-td>{{item.associated_docu_no}}</uni-td>
							<uni-td>{{item.business_type === 0?'领料出库':'销售出库'}}</uni-td>
							<uni-td>{{item.customer}}</uni-td>
							<uni-td>{{item.contract_number}}</uni-td>
							<uni-td>{{item.contract_type ===0?'采购合同':'销售合同'}}</uni-td>
							<uni-td>{{item.applicant}}</uni-td>
							<uni-td>{{item.applicant_date}}</uni-td>
							<uni-td>{{item.applicant_status===0?'未提交':item.applicant_status===1?'待审核':'已审核'}}</uni-td>
							<uni-td>{{item.reviewer}}</uni-td>
							<uni-td>{{item.reviewer_date}}</uni-td>
							<uni-td>{{item.reviewer_status === 0 ? '驳回':'通过'}}</uni-td>
							<uni-td>详情</uni-td>
						</uni-tr>
					</uni-table>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
               dataLIist:[{
				   id:1 ,//编号
				   docu_no:'001' ,//单据号
				   associated_docu_no:"001-1"  ,//关联单据号
				   business_type:0,  //业务类型:0领料出库,1销售出库 
				   customer:"客户A",  //客户
				   contract_number:"C001", //合同编号
				   contract_type:1, //合同类型:0采购合同,1销售合同
				   applicant:"张三", //申请人
				   applicant_date:"2025-04-02", //申请日期
				   applicant_status:2, //申请状态:0未提交,1待审核,2已审核
				   reviewer:"李四", //审核人
				   reviewer_date:"2025-04-07", //审核日期
				   reviewer_status:1,  //审核状态:0驳回,1通过
				   review_comments:"",  //审核意见
				   status:2, //单据状态:0未分拣,1已分拣,2已盘点,3已发货
				   remark:"", //备注
			   },
			   {
			   				   id:2 ,//编号
			   				   docu_no:'002' ,//单据号
			   				   associated_docu_no:"002-1"  ,//关联单据号
			   				   business_type:1,  //业务类型:0领料出库,1销售出库 
			   				   customer:"客户B",  //客户
			   				   contract_number:"C002", //合同编号
			   				   contract_type:0, //合同类型:0采购合同,1销售合同
			   				   applicant:"王五", //申请人
			   				   applicant_date:"2025-04-02", //申请日期
			   				   applicant_status:1, //申请状态:0未提交,1待审核,2已审核
			   				   reviewer:"赵六", //审核人
			   				   reviewer_date:"2025-04-07", //审核日期
			   				   reviewer_status:0,  //审核状态:0驳回,1通过
			   				   review_comments:"",  //审核意见
			   				   status:2, //单据状态:0未分拣,1已分拣,2已盘点,3已发货
			   				   remark:"", //备注
			   }]
			}
		},
		methods: {

		}
	}
</script>

<style>
	.container {
		background-color: rgb(249 250 251);
		height: 1024px;
	}

	.fixed {
		position: fixed;
	}

	.box-fixed {
		box-sizing: border-box;
	}

	.left-0 {
		left: 0px;
	}

	.top-0 {
		top: 0px;
	}

	.width-256 {
		width: 256px;
	}

	.h-full {
		height: 100%;
	}

	.w-full {
		width: 100%;
	}

	.bg-gray {
		background-color: #1F2937;
	}

	.bg-blue {
		background-color: #2563EB;
	}

	.bg-white {
		background-color: #ffffff;
	}

	.p-16 {
		padding: 16px;
	}

	.p-24 {
		padding: 24px;
	}

	.p-32 {
		padding: 32px;
	}

	.py-8 {
		padding-top: 8px;
		padding-bottom: 8px;
	}

	.px-16 {
		padding-left: 16px;
		padding-right: 16px;
	}

	.mb-32 {
		margin-bottom: 32px;
	}

	.mb-8 {
		margin-bottom: 8px;
	}

	.mb-16 {
		margin-bottom: 16px;
	}

	.mb-24 {
		margin-bottom: 24px;
	}

	.ml-256 {
		margin-left: 256px;
	}

	.text-whilte {
		color: #ffffff;
	}

	.font-bold {
		font-weight: bold;
	}

	.text-xl {
		font-size: 20px;
		line-height: 28px;
	}

	.text-sm {
		font-size: 16px;
		line-height: 24px;
	}

	.text-gray {
		color: #9CA3AF;
	}

	.round-lg {
		border-radius: 8px;
	}

	.round-sm {
		border-radius: 4px;
	}

	.border {
		border: 1px solid #E4E7ED;
	}

	.shadow {
		box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.12);
	}

	/* 网格 */
	.grid {
		display: grid;
	}

	.grid-cols-6 {
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}

	.gap-24 {
		gap: 24px;
	}

	.gap-10 {
		gap: 10px;
	}

	/* 弹性 */
	.flex {
		display: flex;
	}

	.justify-end {
		justify-content: flex-end;
	}

	
</style>